<template>
  <div id="login">

    <div id="log">
      <p>日志登录</p>
    </div>

    <div>
      <template>
        <el-table :data="tableData"
                  stripe
                  style="width: 100%"
                  :header-cell-style="{'text-align':'center',background:'#F0F0F0',border:'1px solid #DCDCDC',color:'#000000'}"
                  :cell-style="{'text-align':'center',border:'1px solid #DCDCDC'}"
                  tooltip-effect="dark">
          <el-table-column prop="user_id"
                           label="序号"
                           width="180">
          </el-table-column>
          <el-table-column prop="user_name"
                           label="姓名"
                           width="200">
          </el-table-column>
          <el-table-column prop="time"
                           label="登录时间"
                           width="240">
          </el-table-column>
          <el-table-column prop="user_login_address"
                           label="登录地点">
          </el-table-column>
          <el-table-column prop="user_login_Ip"
                           label="登录IP"
                           width="200">
          </el-table-column>
        </el-table>
      </template>
    </div>

    <div class="block">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page.sync="currentPage"
                     :page-size="count"
                     layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="[5, 10, 15, 20]"
                     :total="totalData.length">
      </el-pagination>
    </div>

  </div>

</template>

<script>
export default {
  data () {
    return {
      currentPage: 1,
      page: 1,
      count: 5,
      totalData: [],
      time: ''
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.count = val
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.page = val
    },
    onSearch () {
      this.$axios({
        url: '/loginlog/getlogin',
        method: 'post',
      }).then((res) => {
        this.totalData = res.data.data
        this.totalData.forEach((v, i) => {
          this.time = this.totalData[i].user_work_time
          v.time = this.time.substring(0, 10)
          this.time = this.time.substring(0, 10)
        });

      })
    }
  },
  mounted: function () {
    this.onSearch()
  },

  computed: {
    tableData: function () {
      return this.totalData.slice((this.page - 1) * this.count, this.page * this.count)

    }

  }
}
</script>

<style scoped>
#log p {
  margin-left: 30px;
}
#log {
  margin: 20px 0;
  background-color: rgb(242, 242, 242);
  height: 60px;
  line-height: 60px;
}
.block {
  width: 500px;
  margin: 20px auto;
}
</style>

